<template>
    <public-title
        :show-list="false"
        @change-v="changeV"
        @change-show-status="changeShowStatus"
        @change-m="changeMotion"
        :keyType="keyType"
        :user-id="userId"
    />
    <BasicTable :key="refresh" :columns="motionColumns" :api="queryExercisePageApi" :api-params="apiParams" :afterFetch="afterFetch" />
</template>
<script setup lang="ts">
    import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
    import { ref } from 'vue';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { queryExercisePageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
    import { propTypes } from '/@/utils/propTypes';
    import dayjs from 'dayjs';
    import { motionColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';

    const type = ref(1);
    const status = ref<boolean>(true);
    const value = ref(dayjs(new Date()).format('YYYY-MM-DD'));
    const motionType = ref();
    const props = defineProps({
        userId: propTypes.string.def(''),
        keyType: propTypes.string.def('6'),
    });
    const { refresh, setRefresh } = useChangeTable();
    const apiParams = ref({
        flag: 0,
        userId: props.userId,
        pageSize: 10,
        pageNo: 1,
    });

    function tableReload() {
        apiParams.value = {
            flag: 0,
            userId: props.userId,
            pageSize: 10,
            pageNo: 1,
        };
        setRefresh();
    }

    function afterFetch({ result, setPage, setDataSource }) {
        setPage({
            total: result?.page.total,
            current: result?.page.current,
            pageSize: result?.page.size,
        });
        setDataSource(result?.page?.records);
    }

    function changeV(j: any) {
        type.value = j.type;
        value.value = j.value;
        tableReload();
    }

    function changeShowStatus(s: boolean) {
        status.value = s;
        tableReload();
    }

    function changeMotion(s: string) {
        motionType.value = s;
        tableReload();
    }
</script>
<style scoped lang="less"></style>